<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>件宽高取决于父级比较窄的那一个</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        body {
            height: 100vh;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            background: #fff;
        }

        .pic {
            /* vmin 取视口最短边 */
            /* vmax 取视口最长边 */
            /* width: 186vmin;
            height: 104vmin; */
            width: 100vmin;
            /* height: 100vmin; */
        }
    </style>
</head>

<body>
    <!-- <div class="pic"> -->
        <img src="./pic.webp" class="pic" alt="">
    <!-- </div> -->
</body>

</html>